<template>
  <div class="box1-1">
    <el-card class="box-card-1">
      <div calss="filler">
        <div class="title88"><h3>每周·影院票房</h3></div>
        <div class="ab">
          <el-select
            v-model="selectedWeek"
            placeholder="请选择周数"
            @change="handleWeekChange"
          >
            <el-option
              v-for="week in weeks"
              :key="week"
              :label="`第${week}周`"
              :value="week"
            ></el-option>
          </el-select>
        </div>
      </div>
    </el-card>
    <div class="building88">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="cinemaName" label="影院名称" width="330" />
        <el-table-column
          prop="box_office"
          label="票房（万元）"
          width="200"
          sortable
        />
        <el-table-column
          prop="people"
          label="人次（万人）"
          width="200"
          sortable
        />
        <el-table-column
          prop="session"
          label="场次（千场）"
          width="200"
          sortable
        />
        <el-table-column prop="theaterName" label="院线名称" width="200" />
        <el-table-column prop="week" label="周数" width="100" />
      </el-table>

      <div class="fenye0">
        <div class="bd"></div>
        <div class="fy">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="prev, pager, next,jumper"
            :total="500"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageInfo: {}, //分页信息对象
      pageSize: 25, //当前页条数
      currentPage: 1, //当前页号
      selectedWeek: "",
      weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    };
  },
  methods: {
    handleSizeChange(pageSize) {
      //选择每一页记录数
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size:", pageSize);
    },
    handleCurrentChange(pageNum) {
      //切换页号得到当前页码
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num:", pageNum);
    },
    getPageData(num, size) {
      //获取分页数据
      let params = { pageNum: num, pageSize: size };
      if (this.selectedWeek) {
        params.week = this.selectedWeek;
      }
      console.log("请求参数：", params); // 打印请求参数
      this.$http.get("/cinemaWeek/v1/week", { params }).then((response) => {
        console.log(response.data);
        this.pageInfo = response.data;
        this.tableData = this.pageInfo;
      });
    },
    handleWeekChange() {
      console.log(`selected week: ${this.selectedWeek}`);
      console.log(
        `current page: ${this.currentPage}, page size: ${this.pageSize}`
      );
      this.getPageData(1, this.pageSize);
    },
  },
  mounted() {
    this.getPageData(1, 25);
  },
};
</script>

<style>
.building88 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
}
.title88 {
  color: #0f3fce;
  margin-top: -17px;
}
.ab {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
  margin-top: -45px;
}
.fenye0 {
  width: 1030px;
  height: 70px;
  background-color: white;
}
.fy {
  margin-left: 240px;
}
.bd {
  width: 1030px;
  height: 30px;
  background-color: white;
}
.box-card-1 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  height: 65px;
}
.box1-1 {
  /* background: url("/public/koubeibg.jpg");
background-size: cover; */
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
</style>